---
title: ConectarBotón
description: Usar y personalizar el Botón de Conexión
---

# ConectarBotón

## Usar y personalizar el Botón de Conexión

Este es el componente principal. Es responsable de renderizar el botón de conectar/desconectar, así como la interfaz de usuario para el cambio de cadena.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> Nota: Asegúrate de que tu aplicación esté envuelta en los proveedores necesarios. [Leer más](/docs/installation#wrap-providers).

### Props

El componente `ConnectButton` expone varios props para personalizar su apariencia, incluyendo la visibilidad de diferentes elementos.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'Conectar Cartera',
      type: 'string',
      description: 'La etiqueta de texto mostrada en el botón de conexión',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "Si se muestra el avatar o la dirección de la cuenta activa",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "Si se muestra el icono y/o nombre de la cadena actual, o se oculta completamente",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'Si el saldo es visible al lado del nombre de la cuenta',
    },
  ]}
/>

> Nota: el punto de quiebre `largeScreen` incorporado es `768px`.

### Ejemplos

#### Etiqueta

Usa el prop `label` para establecer un texto personalizado para el `ConnectButton`.

```tsx
<ConnectButton label="__Sign in__" />
```

#### Estado de la cuenta

Aquí hay algunas formas diferentes de usar el prop `accountStatus`.

Mostrar solo el avatar de la cuenta.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

Mostrar solo la dirección de la cuenta.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### Estado de la cadena

Aquí hay algunas formas diferentes de usar el prop `chainStatus`.

Mostrar solo el icono de la cadena actual.

```tsx
<ConnectButton chainStatus="__icon__" />
```

Mostrar solo el nombre de la cadena actual.

```tsx
<ConnectButton chainStatus="__name__" />
```

Ocultar completamente la interfaz de usuario de la cadena.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### Mostrar saldo

Usa el prop `showBalance` para ocultar/mostrar el saldo.

Ocultar el saldo.

```tsx
<ConnectButton showBalance={__false__} />
```

#### Responsivo

Estos props también se pueden definir en un formato responsivo.

En pantallas pequeñas, muestra solo el icono de la cuenta. Pero en pantallas grandes, muestra el icono y la dirección.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

En pantallas pequeñas, oculta el saldo. Pero en pantallas grandes, muéstralo.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
